<template>
  <el-container style="height: 100%">

    <el-main style="height: 100%">
      <el-scrollbar height="100%" >
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>{{article.title}}</span>
              <el-row style="float: right">
                <el-button @click="doHearten" style="margin-right: 20px">
                  <a v-if="heartenStatus === '1'">已点赞</a>
                  <a v-else> 点赞 </a>
                </el-button>
                {{heartenSum}}
              </el-row>
            </div>
          </template>
          <div v-html="article.body"> </div>
        </el-card>
        <el-card class="box-card">
          <el-input
              v-model="commenttext"
              :rows="6"
              type="textarea"
              placeholder="输入评论"
          />
          <el-button @click="sendComment" style="margin: 2px" type="primary">发表评论</el-button>
        </el-card>
        <el-card class="box-card" >
          <template #header>
            <div class="card-header">
              <span>评论区</span>
            </div>
          </template>
          <div >
            <el-scrollbar >
              <p v-for="comment in comments" class="scrollbar-message-item">
                {{comment.createtime}}<br/>
                {{ comment.username }}：{{comment.body}}<br/>
              </p>
            </el-scrollbar>
          </div>
        </el-card>
      </el-scrollbar>
    </el-main>

    <div style="width: 1px;background-color: #cbcbcb"></div>

    <el-aside width="400px">
      <el-space direction="vertical">
        <el-card class="box-card" style="width: 350px">
          <template #header>
            <div class="card-header">
              <el-button @click="toOwnPage">作者主页</el-button>
            </div>
          </template>
          <div>
            <el-row>
              <el-avatar shape="square" :size="50" :fit="'fill'" :src="'http://124.222.162.206:8190/file/preview/'+headshot.filename"></el-avatar>
            </el-row>
            <el-row>
              作者：{{writer.username}}
            </el-row>
            <el-row>
              介绍：{{writer.description}}
            </el-row>
          </div>
        </el-card>
      </el-space>
    </el-aside>
  </el-container>
</template>

<script>
import router from "@/router";
import Moment from 'moment'
import request from "@/utils/request";
import {getFullUserInfo, getUserInfo} from "@/utils/owninfo";

export default {
  name: "ArticleDetail",
  data() {
    return {
      // 业务相关
      article:null,
      writer:null,
      headshot:null,
      commenttext:null,
      comments:null,
      users:null,
      sendToCommentId:undefined,
      heartenSum:0,
      heartens:null,
      heartenStatus:null,
    }
  },
  created() {
    this.init()
    this.loadComment()
    this.loadHearten()
  },
  methods: {
    init(){
      const carticle = JSON.parse(this.$route.query.article);
      this.$data.article = carticle.article;
      this.$data.headshot = carticle.headshot;
      this.$data.writer = carticle.writer;
      // console.log(this.$data.article)
    },
    loadComment(){
      request({
        url: '/comment/selectcomments',
        method: 'get',
        params:{
          articleid: this.article.articleid,
        }
      }).then(response => {
        console.log(response)

        this.comments = response.data.comments;
        this.users = response.data.users;

        for(var i = 0; i < this.comments.length; i++){
          this.comments[i].username = this.users[this.comments[i].userid].username;
          this.comments[i].createtime = Moment(this.comments[i].createtime).format('YYYY-MM-DD HH:mm:ss')
        }
      }).catch(error => {
        console.info(error)
        this.$message.error("网络错误")
      })
    },
    sendComment(){
      request({
        url: '/comment/insertcomment',
        method: 'get',
        params:{
          userid:getUserInfo(),
          type:"text",
          articleid: this.article.articleid,
          commentid: this.commentid,
          body:this.commenttext,
        }
      }).then(response => {
        console.log(response)
        response.data.comment.createtime = Moment(response.data.comment.createtime).format('YYYY-MM-DD HH:mm:ss')
        response.data.comment.username = JSON.parse(getFullUserInfo()).username;
        this.comments.push(response.data.comment);
        this.$message.success("评论成功");
      }).catch(error => {
        console.info(error)
        this.$message.error("网络错误");
      })
    },
    toOwnPage(){
      router.push({
        name:"OwnPage",//这个name就是你刚刚配置在router里边的name
        query:{
          user:JSON.stringify(this.writer)
        }
      })
    },
    loadHearten(){
      request({
        url: '/hearten/getheartensbyarticleid',
        method: 'get',
        params:{
          relationid: this.article.articleid,
          relationtype: "article",
          userid: getUserInfo(),
        }
      }).then(response => {
        console.log(response)
        this.heartens = response.data.heartens;
        this.heartenSum = response.data.heartenSum;
        this.heartenStatus = response.data.heartenStatus;

      }).catch(error => {
        console.info(error)
        this.$message.error("网络错误");
      })
    },
    doHearten(){
      request({
        url: '/hearten/inserthearten',
        method: 'get',
        params:{
          relationid: this.article.articleid,
          relationtype: "article",
          userid: getUserInfo(),
        }
      }).then(response => {
        console.log(response)
        this.heartenStatus = response.data.hearten.status
        if(this.heartenStatus === '1'){
          this.heartenSum += 1;
        }else if(this.heartenStatus === '2'){
          this.heartenSum -= 1;
        }
      }).catch(error => {
        console.info(error)
        this.$message.error("网络错误");
      })
    }
  }
}
</script>

<style scoped>

.scrollbar-message-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

</style>
